
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>结算页面</title>
    <link href="/static/myhome/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/basic/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
    <link href="/static/myhome/css/jsstyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/myhome/js/address.js"></script>
  </head>
  
  <body>
    <!--顶部导航条 -->
    <div class="am-container header">
      <ul class="message-l">
        <div class="topMessage">
          <div class="menu-hd">
            <a href="#" target="_top" class="h">亲，请登录</a>
            <a href="#" target="_top">免费注册</a></div>
        </div>
      </ul>
      <ul class="message-r">
        <div class="topMessage home">
          <div class="menu-hd">
            <a href="#" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
          <div class="menu-hd MyShangcheng">
            <a href="{% url 'myhome_geren'%}" target="_top">
              <i class="am-icon-user am-icon-fw"></i>个人中心</a>
          </div>
        </div>
        <div class="topMessage mini-cart">
          <div class="menu-hd">
            <a id="mc-menu-hd" href="#" target="_top">
              <i class="am-icon-shopping-cart  am-icon-fw"></i>
              <span>购物车</span>
              <strong id="J_MiniCartNum" class="h">0</strong></a>
          </div>
        </div>
        <div class="topMessage favorite">
          <div class="menu-hd">
            <a href="#" target="_top">
              <i class="am-icon-heart am-icon-fw"></i>
              <span>收藏夹</span></a>
          </div>
      </ul>
      </div>
      <!--悬浮搜索框-->
      <div class="nav white">
        <div class="logo">
          <img src="/static/myhome/images/logo.png" /></div>
        <div class="logoBig">
          <li>
            <img src="/static/myhome/images/logobig.png" /></li>
        </div>
        <div class="search-bar pr">
          <a name="index_none_header_sysc" href="#"></a>
          <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit"></form>
        </div>
      </div>
      <div class="clear"></div>
      <div class="concent">
        <!--地址 -->
        <div class="paycont">
          <div class="address">
            <h3>确认收货地址</h3>
            <div class="control">
              <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div></div>
            <div class="clear"></div>
            <ul>
              <div class="per-border"></div>
              {% for i in address %}
              <li addid="{{i.id}}" class="user-addresslist caddres  {% if i.isselect == 1 %}defaultAddr{% endif %}">
                <div class="address-left">
                  <div class="user DefaultAddr">
                    <span class="buy-address-detail">
                      <span class="buy-user">{{i.name}}</span>
                      <span class="buy-phone">{{i.phone}}</span></span>
                  </div>
                  <div class="default-address DefaultAddr">
                    <span class="buy-line-title buy-line-title-type">收货地址：</span>
                    <span class="buy--address-detail">
                      <span class="province">{{i.sheng}}</span>
                      <span class="city">{{i.shi}}</span>
                      <span class="dist">{{i.xian}}</span>
                      <span class="street">{{i.addinfo}}</span></span>
                    </span>
                  </div>
                  {% if i.isselect == 1 %}
                  <ins class="deftip">默认地址</ins>
                  {% endif %}
                </div>

                <div class="address-right">
                  <a href="/static/myhome/person/address.html">
                    <span class="am-icon-angle-right am-icon-lg"></span>
                  </a>
                </div>
                <div class="clear"></div>
                <div class="new-addr-btn">
                  <a href="#" class="hidden">设为默认</a>
                  <span class="new-addr-bar hidden">|</span>
                  <a href="#">编辑</a>
                  <span class="new-addr-bar">|</span>
                  <a href="javascript:void(0);" onclick="delClick(this);">删除</a></div>
              </li>
              <div class="per-border"></div>
              {% endfor %}
            </ul>
            <div class="clear"></div>
          </div>
          <!--物流 -->
          <div class="logistics">
            <h3>选择物流方式</h3>
            <ul class="op_express_delivery_hot">
              <li wid="0" data-value="yuantong" class="OP_LOG_BTN  ">
                <i class="c-gap-right" style="background-position:0px -468px"></i>圆通
                <span></span></li>
              <li wid="1" data-value="shentong" class="OP_LOG_BTN  ">
                <i class="c-gap-right" style="background-position:0px -1008px"></i>申通
                <span></span></li>
              <li wid="2" data-value="yunda" class="OP_LOG_BTN  ">
                <i class="c-gap-right" style="background-position:0px -576px"></i>韵达
                <span></span></li>
              <li wid="3" data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last ">
                <i class="c-gap-right" style="background-position:0px -324px"></i>中通
                <span></span></li>
              <li wid="4" data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom">
                <i class="c-gap-right" style="background-position:0px -180px"></i>顺丰
                <span></span></li>
            </ul>
          </div>
          <div class="clear"></div>
          <!--支付方式-->
          <div class="logistics">
            <h3>选择支付方式</h3>
            <ul class="pay-list">
              <li pay="0" class="pay card">
                <img src="/static/myhome/images/wangyin.jpg" />银联
                <span></span></li>
              <li pay="1" class="pay qq">
                <img src="/static/myhome/images/weizhifu.jpg" />微信
                <span></span></li>
              <li pay="2" class="pay taobao">
                <img src="/static/myhome/images/zhifubao.jpg" />支付宝
                <span></span></li>
            </ul>
          </div>
          <div class="clear"></div>
          <!--订单 -->
          <div class="concent">
            <div id="payTable">
              <h3>确认订单信息</h3>
              <div class="cart-table-th">
                <div class="wp">
                  <div class="th th-item">
                    <div class="td-inner">商品信息</div></div>
                  <div class="th th-price">
                    <div class="td-inner">单价</div></div>
                  <div class="th th-amount">
                    <div class="td-inner">数量</div></div>
                  <div class="th th-sum">
                    <div class="td-inner">金额</div></div>
                  <div class="th th-oplist">
                    <div class="td-inner">配送方式</div></div>
                </div>
              </div>
              <div class="clear"></div>
              {% for i in cargoods %}
              <tr class="item-list">
                <div class="bundle  bundle-last">
                  <div class="bundle-main">
                    <ul class="item-content clearfix">
                      <div class="pay-phone">
                        <li class="td td-item">
                          <div class="item-pic">
                            <a href="#" class="J_MakePoint">
                              <img src="{{i.gid.g_url}}" style="width:100%;height:100%" class="itempic J_ItemImg"></a>
                          </div>
                          <div class="item-info">
                            <div class="item-basic-info">
                              <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">{{i.gid.title}}</a></div>
                          </div>
                        </li>
                        <li class="td td-info">
                          <div class="item-props">
                            <span class="sku-line"></span>
                            <span class="sku-line"></span></div>
                        </li>
                        <li class="td td-price">
                          <div class="item-price price-promo-promo">
                            <div class="price-content">
                              <em class="J_Price price-now">{{i.gid.price}}</em></div>
                          </div>
                        </li>
                      </div>
                      <li class="td td-amount">
                        <div class="amount-wrapper ">
                          <div class="item-amount ">
                            <span class="phone-title">购买数量</span>
                            <div class="sl">
                            
                              <input class="text_box" name="" type="text" value="{{i.num}}" style="width:30px;" />
                              
                          </div>
                        </div>
                      </li>
                      <li class="td td-sum">
                        <div class="td-inner">
                          <em tabindex="0" class="J_ItemSum number sumprice">{%  widthratio i.num 1 i.gid.price  %}</em></div>
                      </li>
                      <li class="td td-oplist">
                        <div class="td-inner">
                          <span class="phone-title">配送方式</span>
                          <div class="pay-logis">快递
                            <b class="sys_item_freprice">0</b>元</div></div>
                      </li>
                    </ul>
                    <div class="clear"></div>
                  </div>
              </tr>
              {% endfor %}
              <div class="clear"></div>
              </div>
             
              </div>
              <div class="clear"></div>
              <div class="pay-total">
                <!--留言-->
                <div class="order-extra">
                  <div class="order-user-info">
                    <div id="holyshit257" class="memo">
                      <label>买家留言：</label>
                      <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明" class="memo-input J_MakePoint c2c-text-default memo-close">
                      <div class="msg hidden J-msg">
                        <p class="error">最多输入500个字符</p></div>
                    </div>
                  </div>
                </div>
                <!--优惠券 -->
                <div class="buy-agio">
                  <li class="td td-coupon">
                    <span class="coupon-title">优惠券</span>
                    <select data-am-selected>
                      <option value="a">
                        <div class="c-price">
                          <strong>￥8</strong></div>
                        <div class="c-limit">【消费满95元可用】</div></option>
                      <option value="b" selected>
                        <div class="c-price">
                          <strong>￥3</strong></div>
                        <div class="c-limit">【无使用门槛】</div></option>
                    </select>
                  </li>
                  <li class="td td-bonus">
                    <span class="bonus-title">红包</span>
                    <select data-am-selected>
                      <option value="a">
                        <div class="item-info">￥50.00
                          <span>元</span></div>
                        <div class="item-remainderprice">
                          <span>还剩</span>10.40
                          <span>元</span></div>
                      </option>
                      <option value="b" selected>
                        <div class="item-info">￥50.00
                          <span>元</span></div>
                        <div class="item-remainderprice">
                          <span>还剩</span>50.00
                          <span>元</span></div>
                      </option>
                    </select>
                  </li>
                </div>
                <div class="clear"></div>
              </div>
              <!--含运费小计 -->
              <div class="buy-point-discharge ">
                <p class="price g_price ">合计（含运费）
                  <span>￥</span>
                  <em class="pay-sum">244.00</em></p>
              </div>
              <!--信息 -->
              <div class="order-go clearfix">
                <div class="pay-confirm clearfix">
                  <div class="box">
                    <div tabindex="0" id="holyshit267" class="realPay">
                      <em class="t">实付款：</em>
                      <span class="price g_price ">
                        <span>￥</span>
                        <em class="style-large-bold-red " id="J_ActualFee"></em></span>
                    </div>
                    {% for i in address %}
                    {% if i.isselect == 1 %}
                    <div id="holyshit268" class="pay-address">
                      <p class="buy-footer-address">
                        <span class="buy-line-title buy-line-title-type">寄送至：</span>
                        <span class="buy--address-detail">
                          <span class="province">{{i.sheng}}</span>
                          <span class="city">{{i.shi}}</span>
                          <span class="dist">{{i.xian}}</span>区
                          <span class="street">{{i.addinfo}}</span></span>
                        </span>
                      </p>
                      <p class="buy-footer-address">
                        <span class="buy-line-title">收货人：</span>
                        <span class="buy-address-detail1">
                          <span class="buy-user">{{i.name}}</span>
                          <span class="buy-phone">{{i.phone}}</span></span>
                      </p>
                    </div>
                    {% endif %}
                    {% endfor %}
                  </div>
                  <div id="holyshit269" class="submitOrder">
                    <div class="go-btn-wrap">
                      <form class="suborder" action="{% url 'myhome_createorder' %}" method="POST">
                        {% csrf_token %}
                        {% for i in  address %}
                        {% if i.isselect == 1 %}
                        <input type="hidden" name="dizhi" class="dizhi" value="{{i.id}}">
                        {% endif %}
                        {% endfor %}
                        <input type="hidden" name="car" class="car" value="{{request.GET.cid}}">
                        <input type="hidden" name="wuliu" class="wuliu">
                        <input type="hidden" name="zhifu" class="zhifu">
                        <a id="J_Go" href="javascript:Void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a></div>
                      </form>
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <!-- 尾部 -->
        <div class="footer">
          <div class="footer-hd">
            <p>
              <a href="#">恒望科技</a>
              <b>|</b>
              <a href="#">商城首页</a>
              <b>|</b>
              <a href="#">支付宝</a>
              <b>|</b>
              <a href="#">物流</a></p>
          </div>
          <div class="footer-bd">
            <p>
              <a href="#">关于恒望</a>
              <a href="#">合作伙伴</a>
              <a href="#">联系我们</a>
              <a href="#">网站地图</a>
              <em>? 2015-2025 Hengwang.com 版权所有</em></p>
          </div>
        </div>
      </div>
      <div class="theme-popover-mask"></div>
      <div class="theme-popover">
        <!--标题 -->
        <div class="am-cf am-padding">
          <div class="am-fl am-cf">
            <strong class="am-text-danger am-text-lg">新增地址</strong>/
            <small>Add address</small></div>
        </div>
        <hr/>
        <div class="am-u-md-12">
          <form class="am-form am-form-horizontal">
            <div class="am-form-group">
              <label for="user-name" class="am-form-label">收货人</label>
              <div class="am-form-content">
                <input type="text" id="user-name" placeholder="收货人"></div>
            </div>
            <div class="am-form-group">
              <label for="user-phone" class="am-form-label">手机号码</label>
              <div class="am-form-content">
                <input id="user-phone" placeholder="手机号必填" type="email"></div>
            </div>
            <div class="am-form-group">
              <label for="user-phone" class="am-form-label">所在地</label>
              <div class="am-form-content address adds">
                <select data-am-selected class="sheng">
                  <option value="a">--请选择省--</option>
                  {% for i in citys %}
                  <option value="{{i.id}}">{{i.name}}</option>
                  {% endfor %}
                  
                </select>

                <select data-am-selected class="shi">
                  <option value="a">--请选择--</option>
                 
                </select>
                <select data-am-selected class="xian">
                  <option value="a">--请选择县--</option>
                  
                </select>
              </div>
            </div>
            <div class="am-form-group">
              <label for="user-intro" class="am-form-label">详细地址</label>
              <div class="am-form-content">
                <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                <small>100字以内写出你的详细地址...</small></div>
            </div>
            <div class="am-form-group theme-poptit">
              <div class="am-u-sm-9 am-u-sm-push-3">
                <div class="am-btn am-btn-danger save">保存</div>
                <div class="am-btn am-btn-danger close">取消</div></div>
            </div>
          </form>
        </div>
      </div>
      <div class="clear"></div>
      <script type="text/javascript">
        // 计算总价
        var totalprice=0
        $('.sumprice').each(function(){
          totalprice += Number($(this).text())
        })
        $('.pay-sum').html(totalprice)
        $('#J_ActualFee').html(totalprice)
        // 城际联动
        $('.adds select').change(function(){
            // 获取当前的value值
            var upid = $(this).val()

            // 发送请求
            $.get('{% url 'myhome_getcitys' %}',{'upid':upid},function(data){
              var el = ''
              // data =[
                // {id:'',name:'',level:'',upid:''},{},{}
              // ]
              if(data[0].level==2){
                el = $('.shi')
              }else if(data[0].level == 3){
                el = $('.xian')
              }else{
                return
              }

              var str = '<option value="a">--请选择--</option>'
              for(var i in data){
                str += '<option value="'+data[i].id+'">'+data[i].name+'</option>'
              }

              el.html(str)
            },'json')
        })
        console.log({{request.GET.cid}})
        // 添加新地址
        $('.save').click(function(){
          var adddata = {}
          // 获取用户填写的信息
          adddata.name = $('#user-name').val()
          adddata.phone = $('#user-phone').val()
          adddata.sheng = $('.sheng').val()
          adddata.shi = $('.shi').val()
          adddata.xian = $('.xian').val()
          adddata.addinfo = $('#user-intro').val()
          console.log(adddata)
          $.get('{% url 'myhome_saveaddress' %}',adddata,function(data){
            if(data['error']==0){
              alert(data['msg'])
              location.href='{% url 'myhome_confirm' %}?cid='+'{{request.GET.cid}}'
            }
          },'json')
        })

        // 选择地址
        $('.caddres').click(function(){
          // 获取id
          var aid = $(this).attr('addid')
          $('.dizhi').val(aid)

          // 获取当前选择
          var phone = $(this).find('.buy-address-detail').html()
          var address = $(this).find('.buy--address-detail').html()
          
          $('.pay-address').find('.buy--address-detail').html(address)
          $('.buy-address-detail1').html(phone)
        })

        // 获取物流
        $('.OP_LOG_BTN').click(function(){
          var wl = $(this).attr('wid')
          $('.wuliu').val(wl)
        })

        // 支付方式
        $('.pay').click(function(){
          var paytype = $(this).attr('pay')
          $('.zhifu').val(paytype)
        })

        // 提交订单
        $('#J_Go').click(function(){
          if(!$('.dizhi').val()){
            alert('请选择dizhi信息')
            return
          }
          if(!$('.wuliu').val()){
            alert('请选择物流信息')
            return
          }
          if(!$('.zhifu').val()){
            alert('请选择支付方式')
            return
          }
          var c = document.getElementsByClassName('td-item');
          if (c.length == 0) {
            alert('没有商品')
                return
          }

          $('.suborder').submit()
        })


      </script>
  </body>

</html>